<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="活动名称">
        <el-input v-model="acti_name"></el-input>
      </el-form-item>
      <el-form-item label="活动类型">
        <el-select v-model="type_id" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.type_name"
            :value="item.type_id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="actiarea_id" placeholder="请选择">
          <el-option
            v-for="item in optionss"
            :key="item.value"
            :label="item.actiarea_name"
            :value="item.actiarea_id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动负责人">
        <el-input v-model="acti_priname"></el-input>
      </el-form-item>
      <hr />
      <el-form-item label="日期">
        <el-date-picker
          type="date"
          v-model="minacti_time"
          style="width: 100%"
        ></el-date-picker> </el-form-item
      >__
      <el-form-item>
        <el-date-picker
          type="date"
          v-model="maxacti_time"
          style="width: 100%"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()">查询</el-button>
      </el-form-item>
    </el-form>

    <div style="text-align: left">
      <el-button type="text" size="small" @click="handleAdd()">添加</el-button>
      <el-button type="text">导出</el-button>
    </div>

    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="acti_name" label="活动名称"> </el-table-column>
      <el-table-column prop="type_name" label="活动类型"> </el-table-column>
      <el-table-column prop="actiarea_name" label="区域"> </el-table-column>
      <el-table-column prop="acti_time" label="活动日期"> </el-table-column>
      <el-table-column prop="acti_site" label="地点"> </el-table-column>
      <el-table-column prop="acti_priname" label="负责人"> </el-table-column>
      <el-table-column prop="acti_clientsum" label="客户数量">
      </el-table-column>
      <el-table-column prop="acti_price" label="费用"> </el-table-column>
      <el-table-column label="接触点设置"
        ><el-button type="text" size="small" @click="handleEDM()"
          >EDM</el-button
        >
      </el-table-column>
      <el-table-column label="操作" width="222px">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleKehu(scope.row.acti_id)"
            >关联客户设置</el-button
          >|
          <el-button
            type="text"
            size="small"
            @click="handleAction(scope.row.acti_id)"
            >活动参与设置</el-button
          >|
          <el-button
            type="text"
            size="small"
            @click="handleEDM(scope.row.acti_id)"
            >EDM</el-button
          >|
          <el-button
            type="text"
            size="small"
            @click="handleDaoRu(scope.row.acti_id)"
            >导入关联客户</el-button
          >|
          <el-button
            type="text"
            size="small"
            @click="handleEdit(scope.row.acti_id)"
            >编辑</el-button
          >|
          <el-button
            type="text"
            size="small"
            @click="handleDelete(scope.row.acti_id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageindex"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalcount"
    >
    </el-pagination>
    <!--添加-->
    <el-dialog :visible.sync="dialogVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.acti_name"></el-input>
        </el-form-item>
        <el-form-item label="活动类型" style="text-align: left">
          <el-select v-model="form.type_id" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.type_name"
              :value="item.type_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动区域" style="text-align: left">
          <el-select v-model="form.actiarea_id" placeholder="请选择">
            <el-option
              v-for="item in optionss"
              :key="item.value"
              :label="item.actiarea_name"
              :value="item.actiarea_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动日期">
          <el-col :span="8">
            <el-input v-model="form.acti_time"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="地点">
          <el-col :span="8">
            <el-input v-model="form.acti_site"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="负责人">
          <el-col :span="8">
            <el-input v-model="form.acti_priname"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="接触点">
          <el-col :span="8">
            <el-radio-group v-model="form.resource">
              <el-radio label="EDM"></el-radio>
              <el-radio label="电话"></el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="客户数量">
          <el-col :span="8">
            <el-input v-model="form.acti_clientsum"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="费用">
          <el-col :span="8">
            <el-input v-model="form.acti_price"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="嘉宾名单">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="活动总结"></el-form-item>
        <el-form-item label="活动日程"></el-form-item>
        <el-form-item label="其他"></el-form-item>
        <span
          >*上传文件仅支持jpg、JPG、jpeg、gif、png、xls、xlsx、doc、docx、ppt、pptx、zip、rar、pdf格式，单个文件大小不超过15M。</span
        >
        <el-form-item>
          <el-button type="primary" @click="onSubmitAdd()">保存</el-button>
          <el-button>关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--编辑-->
    <el-dialog :visible.sync="dialogVisibleupdate">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.acti_name"></el-input>
        </el-form-item>
        <el-form-item label="活动类型" style="text-align: left">
          <el-select v-model="form.type_id" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.type_name"
              :value="item.type_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动区域" style="text-align: left">
          <el-select v-model="form.actiarea_id" placeholder="请选择">
            <el-option
              v-for="item in optionss"
              :key="item.value"
              :label="item.actiarea_name"
              :value="item.actiarea_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动日期">
          <el-col :span="8">
            <el-input v-model="form.acti_time"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="地点">
          <el-col :span="8">
            <el-input v-model="form.acti_site"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="负责人">
          <el-col :span="8">
            <el-input v-model="form.acti_priname"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="接触点">
          <el-col :span="8">
            <el-radio-group v-model="form.resource">
              <el-radio label="EDM"></el-radio>
              <el-radio label="电话"></el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="客户数量">
          <el-col :span="8">
            <el-input v-model="form.acti_clientsum"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="费用">
          <el-col :span="8">
            <el-input v-model="form.acti_price"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="嘉宾名单">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="活动总结"></el-form-item>
        <el-form-item label="活动日程"></el-form-item>
        <el-form-item label="其他"></el-form-item>
        <span
          >*上传文件仅支持jpg、JPG、jpeg、gif、png、xls、xlsx、doc、docx、ppt、pptx、zip、rar、pdf格式，单个文件大小不超过15M。</span
        >
        <el-form-item>
          <el-button type="primary" @click="onSubmitupdate()">保存</el-button>
          <el-button>关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--EDM-->
    <el-dialog :visible.sync="dialogVisibleEDM" width="900px">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="行业">
          <el-select v-model="com_ind_id">
            <el-option
              v-for="item in optionscomid"
              :key="item.value"
              :label="item.com_ind_name"
              :value="item.com_ind_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公司">
          <el-input v-model="acti_name"></el-input>
        </el-form-item>
        <el-form-item label="KA">
          <el-select v-model="com_ka_id">
            <el-option
              v-for="item in optionskaid"
              :key="item.value"
              :label="item.com_ka_name"
              :value="item.com_ka_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="视频KA">
          <el-select v-model="region" placeholder="请选择">
            <el-option label="待定" value="待定"></el-option>
            <el-option label="你好" value="你好"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="acti_name"></el-input>
        </el-form-item>
        <el-form-item label="语言">
          <el-select v-model="lang_id">
            <el-option
              v-for="item in optionslangid"
              :key="item.value"
              :label="item.lang_name"
              :value="item.lang_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="AD tech">
          <el-select v-model="region" placeholder="请选择">
            <el-option label="待定" value="待定"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">查询</el-button>
        </el-form-item>
        <hr />
        <div style="background-color: gray; width: 860px; height: 500px"></div>
      </el-form>
    </el-dialog>
    <!--关联客户设置-->
    <el-dialog :visible.sync="dialogVisibleKehu" width="900px">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="行业">
          <el-select v-model="com_ind_id">
            <el-option
              v-for="item in optionscomid"
              :key="item.value"
              :label="item.com_ind_name"
              :value="item.com_ind_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公司">
          <el-input v-model="acti_name"></el-input>
        </el-form-item>
        <el-form-item label="KA">
          <el-select v-model="com_ka_id">
            <el-option
              v-for="item in optionskaid"
              :key="item.value"
              :label="item.com_ka_name"
              :value="item.com_ka_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="视频KA">
          <el-select v-model="region" placeholder="请选择">
            <el-option label="待定" value="待定"></el-option>
            <el-option label="你好" value="你好"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="acti_name"></el-input>
        </el-form-item>
        <el-form-item label="语言">
          <el-select v-model="lang_id">
            <el-option
              v-for="item in optionslangid"
              :key="item.value"
              :label="item.lang_name"
              :value="item.lang_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">查询</el-button>
        </el-form-item>
        <hr />
      </el-form>
    </el-dialog>
    <!--导入关联客户-->
    <el-dialog :visible.sync="dialogVisibleDaoRu">
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
    </el-dialog>
  </div>
</template>


  <script>
export default {
  data() {
    return {
      acti_name: "",
      type_id: "",
      actiarea_id: "",
      acti_priname: "",
      minacti_time: "",
      maxacti_time: "",
      pageindex: 1,
      pagesize: 5,
      totalcount: 50,
      tableData: {},
      options: [],
      optionss: [],
      optionscomid: [],
      optionskaid: [],
      optionslangid: [],
      dialogVisible: false,
      dialogVisibleupdate: false,
      dialogVisibleEDM: false,
      dialogVisibleKehu: false,
      dialogVisibleDaoRu: false,
      form: {
        acti_name: "",
      },
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
    };
  },
  mounted() {
    this.activityshow(1, 5);
    this.ActiareaList();
    this.TypeList();
    this.IndustryAdminList();
    this.KaList();
    this.LangList();
  },
  methods: {
    activityshow() {
      this.$axios({
        url: "http://localhost:38204/api/Activity/ActivityShow",
        method: "get",
        params: {
          acti_name: this.acti_name,
          type_id: this.type_id,
          actiarea_id: this.actiarea_id,
          acti_priname: this.acti_priname,
          minacti_time: this.acti_time,
          maxacti_time: this.acti_time,
          pageindex: this.pageindex,
          pagesize: this.pagesize,
        },
      }).then((res) => {
        this.totalcount = res.data.data.total;
        this.tableData = res.data.data.data;
      });
    },
    handleKehu() {
      this.dialogVisibleKehu = true;
    },
    handleDaoRu() {
      this.dialogVisibleDaoRu = true;
    },
    handleEdit(tmpid) {
      this.dialogVisibleupdate = true;
      this.$axios({
        url:
          "http://localhost:38204/api/Activity/ActivityUpdate?acti_id=" + tmpid,
        mounted: "get",
      }).then((res) => {
        this.form = res.data.data;
      });
    },
    handleDelete(tmpid) {
      if (confirm("确认删除吗？")) {
        this.$axios({
          url: "http://localhost:38204/api/Activity/ActivityDelete",
          method: "delete",
          params: {
            acti_id: tmpid,
          },
        }).then((res) => {
          if (res.data <= 0) {
            this.$message.success("删除失败");
            return;
          } else {
            this.$message.success("删除成功");
          }
        });
      }
    },
    onSubmit() {
      this.activityshow(1, 5);
    },
    handleSizeChange(val) {
      this.activityshow(1, val);
    },
    handleCurrentChange(val) {
      this.activityshow(val, 5);
    },
    ActiareaList() {
      this.$axios({
        url: "http://localhost:38204/api/Activity/ActiareaList",
        method: "get",
      }).then((res) => {
        this.optionss = res.data.data;
      });
    },
    TypeList() {
      this.$axios({
        url: "http://localhost:38204/api/Activity/TypeList",
        method: "get",
      }).then((res) => {
        this.options = res.data.data;
      });
    },
    IndustryAdminList() {
      this.$axios({
        url: "http://localhost:38204/api/Activity/IndustryAdminList",
        method: "get",
      }).then((res) => {
        this.optionscomid = res.data.data;
      });
    },
    KaList() {
      this.$axios({
        url: "http://localhost:38204/api/Activity/KaList",
        method: "get",
      }).then((res) => {
        this.optionskaid = res.data.data;
      });
    },
    LangList() {
      this.$axios({
        url: "http://localhost:38204/api/Activity/LangList",
        method: "get",
      }).then((res) => {
        this.optionslangid = res.data.data;
      });
    },
    handleAdd() {
      this.dialogVisible = true;
    },
    onSubmitAdd() {
      this.$axios({
        url: "http://localhost:38204/api/Activity/ActivityAdd",
        method: "post",
        data: this.form,
      }).then((res) => { 
        if (res.data <= 0) {
          this.$message.success("添加失败");
          return;
        } else {
          this.$message.success("添加成功");
          this.dialogVisible = false;
          this.activityshow(1, 5);
        }
      });
    },
    handleEDM() {
      this.dialogVisibleEDM = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>

<style>
</style>